revision:
<div class="main"> Footer design using HTML and CSS</div>
<footer class="footer-distributed">
<div class="footer-left">
<p class="footer-links">
<a href="#">home</a> *
<a href="#">blog</a> *
<a href="#">pricing</a> *
<a href="#">about</a> *
<a href="#">faq</a> *
<a href="#">contact</a>
</p>
<p class="footer-company-name">company name © 2020</p>
</div>
<div class="footer-center">
<div><i class="fa fa-map-marker"></i>
<p><span>address:</span> city, country</p>
</div>
<div><i class="fa fa-phone"></i>
<p>telehone number</p>
</div>
<div><i class="fa fa-envelope"></i>
<p><a href="mailto:support@company.com">email contact</a></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About the company</span>
<span>A web designing company</span>
</p>
<div class="footer-icons">
<a href="#"><i class="fa fa-facebook"><img src="../images/facebook.png" width="50"/></i></a>
<a href="#"><i class="fa fa-twitter"><img src="../images/twitter.png" width="50"/></i></a>
<a href="#"><i class="fa fa-insta"><img src="../images/insta.png" width="50"/></i></a>
</div>
</div>
</footer>
<style>
.main {max-height: 30vw; background-image: repeating-linear-gradient(86deg, red, yellow, black); color: cyan;font-size: 38pt;text-align: center; line-height: 40vw;}
footer{position: fixed; bottom: 0;}
.footer-distributed{background-image:repeating-linear-gradient(55deg, lightgray, black, white); box-shadow: 0 .1vw .1vw 0 lightblue; box-sizing: border-box; width: 100%; text-align: left; font: bold 1.5vw sans-serif;padding: 1vw 1vw; margin-top: 2vw;}
.footer-distributed .footer-left, .footer-distributed .footer-center,.footer-distributed .footer-right{display: inline-block;vertical-align: top;}
.footer-distributed .footer-left{width: 35%;}
.footer-distributed .footer-links{color: green;margin: 1vw 0 1.2vw;padding: 0;}
.footer-distributed .footer-links a{display:inline-block; line-height: 1.5; text-decoration: none; color: inherit;}
.footer-distributed .footer-company-name{color: black; font-size: 1.4vw;font-weight: bold;margin: 0;}
.footer-distributed .footer-center{width: 35%; padding-left: 2vw;}
.footer-distributed .footer-center i.fa-envelope{font-size: 1.3vw;line-height: 1.8vw;}
.footer-distributed .footer-center p{display: inline-block; color: dodgerblue; vertical-align: middle; margin:0;}
.footer-distributed .footer-center p span{display:block; font-weight: bold; font-size:2vw;line-height:1.2;}
.footer-distributed .footer-center p a{color: dodgerblue;text-decoration: none;}
.footer-distributed .footer-right{width: 20%;}
.footer-distributed .footer-company-about span{ display: block; color: black;font-size: 1.3vw; font-weight: bold;margin-bottom: 2vw;}
.footer-distributed .footer-icons{margin-top: 2.5vw;}
.footer-distributed .footer-icons a{display: inline-block;width: 3.4w; height: 3.3vw; cursor: pointer; background-color: darkgrey; font-size: 2vw; text-align: center; line-height: 3.5vw; margin-right: .3vw; margin-bottom: .5vw;}
@media (max-width: 880px) {
.footer-distributed{font: bold 1.4vw sans-serif;grid-column:1/2;}
.footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right{display: block; width: 100%; margin-bottom: 4vw;text-align: center; }
.footer-distributed .footer-center i{margin-left: 0;}
.main {line-height: normal; font-size: auto;}
}
</style>